<template>
	<div>
		<basic-container>
			<avue-tabs :option="option" v-model="form" @change="handleChange" @submit="handleSubmit" :upload-before="uploadBefore"
			 :upload-after="uploadAfter"></avue-tabs>
		</basic-container>
	</div>
</template>

<script>
	import {
		curUser,
		changePwd
	} from "@/api/system/user";
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入新密码'));
				} else {
					callback();
				}
			};
			const validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入新密码'));
				} else if (value !== this.form.newpassword) {
					callback(new Error('两次输入新密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				type: "info",
				option: {
					searchMenuSpan: 4,
					emptyBtn: false,
					column: [{
						label: '个人信息',
						prop: 'info',
						option: {
							submitText: '修改',
							column: [
								// {
								//           label: '头像',
								//           type: 'upload',
								//           listType: 'picture-img',
								//           propsHttp: {
								//             res: 'data'
								//           },
								//           canvasOption: {
								//             text: 'ability',
								//             ratio: 0.1
								//           },
								//           action: baseUrl+'/api/files/upload',
								//           tip: '只能上传jpg/png用户头像，且不超过500kb',
								//           span: 12,
								//           row: true,
								//           prop: 'headPic'
								//         }, 
								{
									label: '登录名',
									disabled: true,
									span: 6,
									row: true,
									prop: 'loginName'
								}, {
									label: '真实姓名',
									disabled: true,
									span: 12,
									row: true,
									prop: 'trueName'
								}
							]
						}
					}, {
						label: '修改密码',
						prop: 'password',
						option: {
							submitText: '修改',
							column: [{
								label: '原密码',
								span: 12,
								row: true,
								type: 'password',
								prop: 'oldpassword',
								rules: [{
									required: true,
									message: "请输入原密码",
									trigger: 'blur'
								}]
							}, {
								label: '新密码',
								span: 12,
								row: true,
								type: 'password',
								prop: 'newpassword',
								rules: [{
									required: true,
									validator: validatePass,
									trigger: 'blur'
								}]
							}, {
								label: '确认密码',
								span: 12,
								row: true,
								type: 'password',
								prop: 'newpasswords',
								rules: [{
									required: true,
									validator: validatePass2,
									trigger: 'blur'
								}]
							}]
						}
					}]
				},
				form: {}
			};
		},
		created() {
			this.handleWitch();
		},
		methods: {
			uploadBefore(file, done, loading) {
				const isLimit = (file.size / 1024 / 500) < 1;
				if (!isLimit) {
					this.$message({
						type: "warning",
						message: "上传文件不能超过500KB!"
					});
					loading()
					return false
				}
				done();
			},
			uploadAfter(res, done) {
				this.form.files = res.id;
				done();
			},
			handleSubmit() {
				if (this.type === "password") {
					changePwd(this.form.oldpassword, this.form.newpassword).then(res => {
						if (res.data.code == 200) {
							this.$message.success(res.data.msg);
						}
					}, error => {
						console.log(error);
					});
				}
			},
			handleWitch() {
				if (this.type === "info") {
					curUser().then(res => {
						this.form = res.data.data;
					});
				} else if (this.type === "password") {
					this.form = {
						oldpassword: '',
						newpassword: '',
						newpasswords: ''
					};
				}
			},
			handleChange(item) {
				this.type = item.prop;
				this.handleWitch();
			}
		}
	};
</script>

<style>
</style>
